<template>
    <div class="mine_container">
        <!-- 头部登录状态用户信息栏 -->
        <div class="mine_header_container">
            <div class="mine_header_wrapper">
                <div class="header_img">
                    <img src="../assets/header.jpg" alt="">
                </div>
                <div class="header_message">
                    <div class="login_status" @click="toLogin()">立即登录</div>
                    <div class="user_message">
                        积分：0
                    </div>
                </div>
            </div>
        </div>
        <!-- 滚动消息通知栏 -->
        <div class="scroll_botice_bar">
            <van-notice-bar
                left-icon="volume-o"
                text="新上线更稳定的付费快递查询接口"
                background="#fff"
                color="red"
                scrollable 
            />
            <div class="scroll_bottom_gray_line">

            </div>
        </div>
        <!-- 我的订单 -->
        <div class="order_form_container">
            <div class="order_form_icon">
                <van-icon name="notes-o" size="0.4rem" color="#F7BC53"/>
                <span>我的订单</span> 
            </div>
            <div class="order_form_more">
                <van-icon name="arrow" size="0.4rem"/>
            </div>
        </div>
        <!-- 待  区域 -->
        <div class="stay_container">
            <van-grid :gutter="10" :border="false" >
                <div class="stay_container_item">
                    <MineStay _icon="paid" _text="待付款"/>
                </div>
                <div class="stay_container_item">
                    <MineStay _icon="send-gift-o" _text="待发货"/>
                </div>
                <div class="stay_container_item">
                    <MineStay _icon="logistics" _text="待收货"/>
                </div>
                <div class="stay_container_item">
                    <MineStay _icon="comment-o" _text="待评价"/>
                </div>
            </van-grid>
        </div>
        <div class="scroll_bottom_gray_line">

        </div>
        <!-- 我的区域 -->
        <div class="mine_function_container">
            <van-grid :gutter="10" :border="false" :column-num="3">
                <div class="mine_function_item">
                    <MineStay _icon="gold-coin-o" _text="我的余额" _color="#F86650"/>
                </div>
                <div class="mine_function_item">
                    <MineStay _icon="edit" _text="我的砍价" _color="#F86650"/>
                </div>
                <div class="mine_function_item">
                    <MineStay _icon="coupon-o" _text="我的礼券" _color="#EDB449"/>
                </div>
                <div class="mine_function_item">
                    <MineStay _icon="star-o" _text="我的收藏" _color="#EDB449"/>
                </div>
                <div class="mine_function_item">
                    <MineStay _icon="location-o" _text="我的地址" _color="#5A9FEC"/>
                </div>
                <div class="mine_function_item">
                    <MineStay _icon="service-o" _text="联系客服" _color="#5A9FEC"/>
                </div>
            </van-grid>

            
        </div>
        <div class="scroll_bottom_gray_line_active">
            <span>The work of kang kang</span>
        </div>
    </div>
</template>

<script>
import MineStay from '../components/common/MineStay'

export default {
    components:{
        MineStay
    },
    methods:{
        toLogin(){
            this.$router.push('login')
        }
    }
}
</script>

<style scoped>
    .mine_container {
        width: 100%;
        /* height: ; */
    }
    .mine_header_container {
        width: 100%;
        height: 3rem;
        background-color: #C1B18F;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .mine_header_wrapper {
        width: 90%;
        height: 1.6rem;
        /* background-color: orange; */
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
    }
    .header_img {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 1.6rem;
        overflow: hidden;

    }
    .header_img img {
        width: 100%;
        height: 100%;
    }
    .header_message {
        margin-left: 0.3rem;
        height: 1.6rem;
    }
    .login_status {
        height: 1rem;
        font-size: 0.45rem;
        color: #fff;
    }
    .user_message {
        width: 2rem;
        height: 0.6rem;
        background-color: #B6A37D;
        border-radius: 0.1rem;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        text-indent: 0.2rem;
        font-size: 0.22rem;
        color: #fff;
    }
    .scroll_bottom_gray_line {
        width: 100%;
        height: 0.2rem;
        background-color: #F5F5F5;
    }
    .order_form_container {
        width: 100%;
        height: 1rem;
        border-bottom: 0.02rem solid #F5F5F5;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
    }
    .order_form_icon {
        width: 85%;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 4%;
    }
    .order_form_icon span {
        margin-left: 0.2rem;
    }
    .order_form_more {
        width: 10%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .stay_container {
        width: 100%;
        /* height: 1.4rem; */
        /* background-color: #fff; */
    }
    .stay_container_item {
        width: 25%;
    }
    .mine_function_container {
        width: 100%;
    }
    .mine_function_item {
        width: 33%;
    }
    .scroll_bottom_gray_line_active {
        width: 100%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 0.27rem;
        background-color: #f5f5f5;
        /* padding: 0.1rem; */
    }
    .scroll_bottom_gray_line_active span {
        padding: 0.1rem;
    }
</style>